<!--
 * @Author: White
 * @description: 
 * @LastEditTime: 2021-08-19 17:43:02
-->
<template>
    <div class="home-header">
       <div class="header-logo">
         <h1>vue3.0 Ts</h1>
         <img src="../assets/logo.png" alt="">
       </div>
       <div class="header-tab">
        <ul>
          <li><router-link to="/add">待办事项</router-link></li>
          <li><router-link to="/done">已完成</router-link></li>
          <li><router-link to="/delete">已删除</router-link></li>
        </ul>
       </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup () {
        return {}
    }
})
</script>

<style scoped lang="scss">
.home-header {
  .header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .header-tab {
    display: flex;
    justify-content: center;
    ul {
      margin: 0 auto;
      padding: 0px;
      li {
        float: left;
        height: 30px;
        list-style: none;
        text-decoration:none;
        padding: 0px 10px;
        a {
          text-decoration:none;
          color: #333;
        }
      }
      .active {
        color: #3b3de8;
        font-weight: 900;
      }
    }
  }
}
</style>